let checkAllState = false
/**
 * 动态渲染购物车列表数据
 */
function loadCartList() {
    let cartStr = localStorage.getItem('NEWCARTLIST') || [];
    let cartList = JSON.parse(cartStr) || []

    let str = `<tr>
                <th><input type="checkbox" name="checkall" ${checkAllState?'checked':''}>全选</th>
                <th>序号</th>
                <th>商品图片</th>
                <th>商品信息</th>
                <th>单价</th>
                <th>数量</th>
                <th width="100px">金额</th>
                <th>操作</th>
            </tr>`
    cartList.forEach(item => {
        let trStr = `<tr data-index="${item.id}">
                        <td><input type="checkbox" data-index="${item.id}" name="checksingle"  ${item.state?'checked':''}></td>
                        <td>${item.id}</td>
                        <td><img src="${item.picture}" alt=""></td>
                        <td class="spe">${item.shop}</td>
                        <td>￥${item.price}</td>
                        <td> <input name="minus" type="button" value="-" ${item.num==0?'disabled':''} ><input type="text" name="amount" value="${item.num}"><input
                                type="button" name="plus" value="+"></td>
                        <td>￥${item.singlePrice}</td>
                        <td><a href="#">移入收藏</a> <br /><a href="#" class="del">删除</a></td>
                    </tr> `
        str += trStr
    })

    $('table').html(str)

    totalPrice() //计算总价
}

/**
 * 购物车操作
 */
function onCartList() {
    //加操作
    $('table').on('click', 'input[name="plus"]', function () {
        let cartStr = localStorage.getItem('NEWCARTLIST')
        let cartList = JSON.parse(cartStr) || []

        let id = $(this).parent().parent().attr('data-index')
        let product = cartList.find(item => item.id == id)
        product.num++

        product.singlePrice = (product.num * product.price).toFixed(2) //计算价格

        //持久化存
        localStorage.setItem('NEWCARTLIST', JSON.stringify(cartList))

        //重新渲染页面
        loadCartList()

    })

    //减操作
    $('table').on('click', 'input[name="minus"]', function () {
        let cartStr = localStorage.getItem('NEWCARTLIST')
        let cartList = JSON.parse(cartStr) || []

        let id = $(this).parent().parent().attr('data-index')
        let product = cartList.find(item => item.id == id)
        product.num--

        product.singlePrice = (product.num * product.price).toFixed(2) //计算价格

        //持久化存
        localStorage.setItem('NEWCARTLIST', JSON.stringify(cartList))

        //重新渲染页面
        loadCartList()
    })
    //删除操作
    $('table').on('click', '.del', function (e) {
        e = e || window.event
        e.preventDefault()
        let cartStr = localStorage.getItem('NEWCARTLIST')
        let cartList = JSON.parse(cartStr) || []
        let id = $(this).parent().parent().attr('data-index')
        //找索引号
        let index = cartList.findIndex(item => item.id == id)
        cartList.splice(index, 1)

        //持久化存
        localStorage.setItem('NEWCARTLIST', JSON.stringify(cartList))
        //重新渲染页面
        loadCartList()

    })

    //复选框
    $('table').on('click', 'input[name="checksingle"]', function () {
        let cartStr = localStorage.getItem('NEWCARTLIST')
        let cartList = JSON.parse(cartStr) || []
        let id = $(this).parent().parent().attr('data-index')

        //设置当前复选框数据
        let product = cartList.find(item => item.id == id)
        product.state = !product.state
        //全选框数据

        checkAllState = cartList.every(item => item.state == true)
        //持久化存
        localStorage.setItem('NEWCARTLIST', JSON.stringify(cartList))
        //重新渲染页面
        loadCartList()
    })
    //全选框
    $('table').on('click', 'input[name="checkall"]', function () {
        let cartStr = localStorage.getItem('NEWCARTLIST')
        let cartList = JSON.parse(cartStr) || []
        //设置全选框状态
        checkAllState = !checkAllState
        //所有复选框状态
        cartList.forEach(item => item.state = checkAllState)
        //持久化存
        localStorage.setItem('NEWCARTLIST', JSON.stringify(cartList))
        //重新渲染页面
        loadCartList()
    })
}

/**
 * 跳转到商品列表页
 */
function onProductList() {
    $('.logo img').on('click', function () {
        location.href = './index.html'
    })
}


/**
 * 计算选中商品总价
 *   将 state为true商品singlePrice价格累加
 */
function totalPrice() {
    let cartStr = localStorage.getItem('NEWCARTLIST')
    let cartList = JSON.parse(cartStr) || []

    let sum = 0
    cartList.forEach(item => {
        if (item.state) {
            sum += Number(item.singlePrice)
        }
    })
    $('.total-price').html('￥' + sum.toFixed(2))
}

// 点击按钮进行结算
const payMoneyEle = document.querySelector('.product-list div button')
payMoneyEle.addEventListener('click', function () {
    let cartStr = localStorage.getItem('NEWCARTLIST')
    let cartList = JSON.parse(cartStr) || []
    let sum = 0
    cartList.forEach(item => {
        if (item.state) {
            sum += Number(item.singlePrice)
        }
    })
    if (sum == 0) {
        alert('您还未选中任何商品')
    } else {
        alert('请支付￥' + sum)
    }
})

// 点击页面上方按钮
const paypayMoneyOneEle = document.querySelector('.payMoneyOne')
paypayMoneyOneEle.addEventListener('click', function () {
    let cartStr = localStorage.getItem('NEWCARTLIST')
    let cartList = JSON.parse(cartStr) || []
    let sum = 0
    cartList.forEach(item => {
        if (item.state) {
            sum += Number(item.singlePrice)
        }
    })
    if (sum == 0) {
        alert('您还未选中任何商品')
    } else {
        alert('请支付￥' + sum)
    }
})
loadCartList()
onCartList()
onProductList()